<template>
	<Modal :title="title" v-model="visible" width="920" :footer-hide="true" @on-cancel="visible = false">
		<Card>			
			<div style="display: flex;align-items: center;"><p>发布者头像：</p><img :src="form.userInfo.headImgUrl" style="width: 40px;height: 40px;border-radius: 20px;" /></div>
			<Divider />
			<div>发布者：{{form.userInfo.username}}</div>
			<Divider />
			<div>
				<div>发布内容：</div>
				<p>{{form.content}}</p>
        <div style="display: flex;flex-wrap: wrap;">
          <div v-for="(item, index) in form.pics" :key="index">
            <img :src="item" alt="" style="width: 100px;height: 100px;margin-right: 10px;">
          </div>
        </div>
			</div>
			<Divider />
      <div style="display: flex;">
        <div>浏览量：{{ form.historyCount }}</div>
        <div style="margin-left: 30px;">收藏量：{{ form.likeCount }}</div>
        <div style="margin-left: 30px;">评论量：{{ form.commentCount }}</div>
      </div>
      <Divider />
			<div>发布地址：{{form.publishAddress}}</div>
		</Card>
	</Modal>
</template>

<script>
import { getPostDetail } from '@/api/new.js';
export default {
	name: 'postDetail',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object
		}
	},
	data() {
		return {
			visible: this.value,
			title: '',
			submitLoading: false,
			maxHeight: 510,
			form: {}
		};
	},
	methods: {
		setCurrentValue(value) {
			// console.log(this.form)
      console.log(value)
      // console.log(data)
			if (value === this.visible) {
				return;
			}
			this.title = '查看评论';
			// 回显
      getPostDetail({ postId: this.data.id }).then(res => {
        if (res.code === 200) {
          this.form = res.data;
          this.visible = value;
        }
      })
		}
	},
	watch: {
		value(val) {
			this.setCurrentValue(val);
		},
		visible(value) {
			this.$emit('input', value);
			console.log(value, '????')
		}
	},
	mounted() {
		// this.init();
	}
};
</script>

<style lang="less">
@import '../../../styles/drawer-common.less';
</style>
